<template>
    <div id="handle" class="handle">
        
        <!--S左侧选择组件-->
        <div class="handle__components handle__item">
            <div class="handle__item-title">
                组件列表
            </div>
            <div class="handle__item-container handle__item-components">
                <div 
                    class="handle__item-components-item"
                    v-for="(item,index) in ChilrenComponents" 
                    @click="clickComponent(index)"
                >
                    <div class="handle__item-components-item-icon">
                        <i :class="'iconfont icon-' + item.icon"></i>
                    </div>
                    <div class="handle__item-components-item-name">
                        {{ item.name }} 
                    </div>
                </div>
                <!-- <div class="handle__item-components-item">
                    <div class="handle__item-components-item-icon">
                        <i class="iconfont icon-yemianbianji-"></i>
                    </div>
                    <div class="handle__item-components-item-name">
                        页面配置
                    </div>
                </div> -->
            </div>
        </div>
        <!--E左侧选择组件-->

        <!--S中间操作区域-->
        <div class="handle__handle handle__item">
            <div class="handle__handle-title handle__item-title">
                <div class="handle__handle-title-item" @click="openWeiXinTool">
                    <span class="handle__handle-title-item-icon iconfont icon-xiaochengxu1"></span>
                    <span class="handle__handle-title-item-text">打开微信开发工具</span>
                </div>
                <div class="handle__handle-title-item" @click="resetHandle">
                    <span class="handle__handle-title-item-icon iconfont icon-shuaxin"></span>
                    <span class="handle__handle-title-item-text">重启操作台</span>
                </div>
            </div>
            <div class="handle__handle-iframe">
                <iframe :src="src" class="handle__handle-iframe-tag" frameborder="0"></iframe>
            </div>
        </div>
        <!--E中间操作区域-->

        <!--S右侧设置组件参数-->
        <div class="handle__params handle__item">
            <div class="handle__item-title">
                {{ params_title }}
            </div>
            <div class="handle__item-container handle__params-form">
                <uni-page 
                    :confirm="confirm"
                    :tpl_id="tplId"
                    :init-complete="initComplete"
                >
                </uni-page>
            </div>

            <div class="handle__params-confirm" @click="confirm++">
                确认设置
            </div>
        </div>
        <!--E右侧设置组件参数-->

    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    import { post } from '@/util/url.js'

    let params_title = ref('设置参数');
    // 提交参数按钮
    let confirm = ref(0);

    const emit = defineEmits(["resetHandle"])
    

    const props = defineProps({
        // 页面src
        src: {
            type: String,
            default: ''
        },
        // 子组件列表
        ChilrenComponents: {
            type: Array
        },
        // 模板id
        tplId: {
            default: 0
        },
        // 项目初始化打开是否完成，watch监听参数，如果更改为true项目加载完成，则继续加载数据
        initComplete: {
            default: false
        }
    });

    /**
     * 重启操作台
     */
    const resetHandle = () => {
        emit("resetHandle")
    }

    /**
     * 打开微信开发工具
     */
    const openWeiXinTool = () => {
        post("WeiXinTool/open")
            .then((res) => {
                console.log(res)
            })
    }

    /**
     * 点击组件
     */
     const clickComponent = (index) => {
        const component = props.ChilrenComponents[index]
        switch(component.identity)
        {
            case 'uni-page':
                params_title.value = component.name
                console.log("页面配置")
                break;
        }
    }
</script>

<script lang="ts">
// 各种组件表单
import UniPage from '@/components-form/uni-page/uni-page.vue'
export default {
    components: {
        UniPage
    }
}
</script>



<style scoped lang="scss">
    .handle{
        display:flex;
        justify-content:space-between;
        height:100%;
        border-radius:15px;
        background-color:#ffffff;
        &__item{
            &-title{
                border-bottom: 1px solid #ccc;
                line-height: 40px;
                height: 40px;
                font-size: 12px;
                color: var(--main-text-color);
                text-indent: 10px;
            }
            &-container{
                padding: 10px;
            }
            &-components{
                display: grid;
                grid-template-columns: repeat(4,1fr);
                grid-gap: 5px;
                &-item{
                    padding: 10px;
                    height: 100px;
                    box-sizing: border-box;
                    text-align: center;
                    cursor: pointer;
                    display: flex;
                    flex-direction: column;
                    &-icon{
                        height: 70px;
                        .iconfont{
                            font-size: 55px;
                            color: var(--main-text-color);
                        }
                    }
                    &-name{
                        font-size: 14px;
                    }
                }
            }
        }
        &__components{
            flex:1;
        }
        &__handle{
            flex:1;
            display: flex;
            flex-direction: column;
            &-title{
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                text-indent: 0;
                line-height: normal;
                border: none;
                cursor: pointer;
                &-item{
                    display: flex;
                    align-items: center;
                    &-icon{
                        margin-right: 5px;
                    }   
                }
            }
            &-iframe{
                flex: 1;
                border: 7px solid var(--main-bg-color);
                box-sizing: border-box;
                cursor: pointer; 
                &-tag{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        &__params{
            position: relative;
            flex:1;
            display: flex;
            flex-direction: column;
            &-form{
                flex: 1;
            }
            &-confirm{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-radius: 0 0 15px 0;
                color: #fff;
                text-align: center;
                font-size: 14px;
                cursor: pointer;
                background-color: var(--main-bg-color);
            }
        }
    }
</style>